import React, { Component } from 'react'
import TabControl from './TabControl/TabControl'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      titles: ['流行', '新歌', '精选'],
      index: 0,
    }
  }

  changeIndex(index) {
    this.setState({
      index,
    })
  }

  getItemType(item) {
    if (item === '流行') {
      return <span>{item}</span>
    } else if (item === '新歌') {
      return <button>{item}</button>
    } else {
      return <i>{item}</i>
    }
  }

  render() {
    const { titles, index } = this.state

    return (
      <div className="app">
        <TabControl
          titles={titles}
          changeIndex={(index) => this.changeIndex(index)}
          // itemType={(item) => <button>{item}</button>}
          itemType={(item) => this.getItemType(item)}
        />
        <h2>{titles[index]}</h2>
      </div>
    )
  }
}

export default App
